import { Component, ReactNode } from "react"

import store from "./store"


class Reduxpage extends Component {
    unForceUpdata!: Function
    componentDidMount(): void {
        this.unForceUpdata = store.subscribe(() => {
            this.forceUpdate()
        })
    }

    componentWillUnmount(): void {
        this.unForceUpdata()
    }

    add = () => {
        store.dispatch({ type: 'ADD' })
    }

    asyncAdd = () => {
        setTimeout(() => {
            store.dispatch((dis: Function) => {
                dis({type: 'ADD'})
            })
        }, 1000)
    }
    promiseAdd = () => {
        store.dispatch(Promise.resolve({ type: 'ADD' }))
    }

    render(): ReactNode {
        return (
            <>
                <h2>redux page</h2>
                <p>{store.getState().count}</p>
                <button onClick={this.add}>add</button>
                <button onClick={this.asyncAdd}>asyncAdd</button>
                <button onClick={this.promiseAdd}>promiseAdd</button>
            </>
        )
    }
}

// function Reduxpage() {
//     return (
//         <>
//             <h2>redux page</h2>

//         </>
//     )
// }



export default Reduxpage